<script>
import { swapItems } from '../../../utils'
import RowLayout from '../../RowLayout/index.vue'
import { Bottom, Delete, Top } from '@element-plus/icons'
export default {
  name: 'WithArrayWidget',
  components: {
    RowLayout
  },
  props: {
    initialState: [String, Object],
    index: Number,
    gutter: {
      type: Number,
      default: 20
    },
    values: Array,
    onChange: Function
  },
  setup(props, { slots }) {
    // 移除
    const handleRemove = (index) => {
      const arr = [...props.values]
      arr.splice(index, 1)
      props.onChange(arr)
    }
    // 下移
    const handleDownMove = (index) => {
      if (index === props.values.length - 1) return
      const arr = swapItems(props.values, index, index + 1)
      props.onChange(arr)
    }
    // 上移
    const handleupMove = (index) => {
      if (index === 0) return
      const arr = swapItems(props.values, index, index - 1)
      props.onChange(arr)
    }

    return () => {
      return (
        <div class="arr-item--row">
          <RowLayout wrap class="width-arr-row" gutter={props.gutter}>
            {slots.default()}
          </RowLayout>
          <el-button
            type="danger"
            circle
            icon={Delete}
            onClick={() => handleRemove(props.index)}
          ></el-button>
          <el-button
            circle
            icon={Top}
            onClick={() => handleupMove(props.index)}
          ></el-button>
          <el-button
            circle
            icon={Bottom}
            onClick={() => handleDownMove(props.index)}
          ></el-button>
        </div>
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.arr-item--row {
  display: flex;
  .width-arr-row {
    flex: 1;
    margin-right: 10px !important;
  }
}
.arr-item--row {
  margin-bottom: 10px;
}
</style>
